<template>
	<div class="sw_file_item">
		<h4>{{ data.name }}</h4>
		<div class="file">
			<svg-icon :icon-name="data.des | fileTypeIcon" size="48" style="display: block"></svg-icon>
			<div class="intro">
				<p>资源大小：{{ data.size | sizeFilter }}</p>
				<p>资源类型：{{ data.des }}</p>
				<p>上传时间：{{ data.createTime }}</p>
			</div>
		</div>
		<el-button-group>
			<el-button size="medium" type="text" @click="handlePreviewFile()">预览</el-button>
			<el-button size="medium" type="text" @click="handleDownloadFile()">下载</el-button>
		</el-button-group>
	</div>
</template>

<script>
export default {
	props: {
		data: { type: Object, default: () => {} }
	},
	methods: {
		handlePreviewFile() {
			this.$emit('preview');
		},
		handleDownloadFile() {
			this.$emit('download');
		}
	}
};
</script>

<style lang="scss" scoped>
.sw_file_item {
	border-top: solid 1px #ebeef5;
	&:first-child {
		border-top: none;
	}
	h4 {
		line-height: 24px;
		padding: 10px 10px 0;
		word-break: break-all;
	}
	.file {
		display: flex;
		align-items: center;
		padding: 10px;
	}
	.svg-icon {
		flex-shrink: 0;
	}
	.intro {
		display: flex;
		flex-wrap: wrap;
		flex: 1;
		overflow: hidden;
		p {
			color: #606266;
			padding: 8px;
			line-height: 1;
			box-sizing: border-box;
		}
	}
	.el-button-group {
		display: flex;
		align-items: center;
		width: 100%;
		border-top: solid 1px #ebeef5;
	}
	.el-button {
		flex: 1;
		border-left: solid 1px #ebeef5;
		&:first-child {
			border-left: none;
		}
	}
}
</style>
